How to use navbar

• Step 1 : We need to take class navbar to create navigation bar or menu bar with logo,login, or search button and then we need to add navbar-dark/navbar-light to make the navbar dark and highlight the text navbar-light will make the navbar light and text will be light.

  

  Hide something for different screen

  

  Change breakpoint for different screen

  

  Responsive paragraph and headings for different screen

  

• Step 2 : Use navbar-brand class to use logo under a tag.

  

• Step 3 : To use menu bar under navbar we will use class navbar-nav under ul tag and inside the li we will use class nav-item and inside it we will use class nav-link under anchor tag.

  
  
  

• Step 4: We use class navbar-expand-lg/md/sm to keep the logo menu items in one horizontal line till the screen size is lg/md/sm. So when the screen size is less than lg menu items will be in one vertical line. You can see menu bar in vertical line as shown in the above image. So, to bring it in horizontal we will use class navbar-expand-lg

  

  Output upto large screen

  

  Output below large screen

  

• Step 5 : We use class dropdown to add dropdown menu in the list tag and then we will add one more class dropdown-menu to create menu and inside it we will take anchor tag with dropdown-item class below the anchor tag

  

• Step 6: To open the dropdown menu, we will take an attribute data-toggle="dropdown with value dropdown inside anchor tag of home "page/About Us" in which we want to create dropdown and add a class dropdown-toggle to open and close when we click on "About Us/Home Page" in which we created the dropdown.

  

  Toggle icon with output

  

• Step 7 : - To add "form or seach/login" we will take form tag with form-inline class to keep the form in one line and inside it we will input tag with class form-control and then to add button we will take button tag which will have btn class and btn-outline-sucess to button color.

  

• Step 8:- We will use mr-auto class on the ul tag just above the form tag to keep the form on the right hand side if space available.

  

• Step 9 :- We will use mr-sm-2 so that when the screen size is below the small screen and input and button will be in two lines and then add class in button my-2 and my-sm-0(screen size small and larger the sm, y axis will have no margin) but my-2 will add margin my-2 in extra small screen size

  

• Step 10: Now, I want to show the menu items on button click and hide on small screen. So, we will create a button just below the logo icon anchor tag and add a class navbar-toggler and now to show the icon, we will take span tag with class navbar-toggler-icon (to create three signs), we can create our own design or icon inside it by removing the this class

  

• Step 11: Now, we want to show the menu items and form when we click on the icon. So, we will put the ul and form tag inside a div which will have two class collapse(It will hide the data on small size) and navbar-collapse(to animate the data inside this div) and since we want to show it on button click so we will add data attribute data-toggle with collapse value on the button of icon and also data-target=""(jise target karna hai usepe ek id lagayege jaise ke div pe aur id add kar denge aur us id ke value to data-target ke value pe pass kar denge). button ke click karne pe myNavbar ko animate karne ke liye. note: button tabhi dikhega jab screen size large se chhota hoga as used class navbar-expand-lg